<template>
  <view class="container">
    <uni-forms ref="form" :model="user" label-width="auto">
      <!-- 原始密码 -->
      <uni-forms-item name="oldPassword" required>
        <uni-easyinput 
          prefixIcon="locked" 
          v-model="user.oldPassword" 
          placeholder="请输入原始密码" 
          :type="showOldPassword ? 'text' : 'password'" 
          :border="true"
          class="fixed-input"
        >
        </uni-easyinput>
      </uni-forms-item>

      <!-- 新密码 -->
      <uni-forms-item name="newPassword" required>
        <uni-easyinput 
          prefixIcon="locked" 
          v-model="user.newPassword" 
          placeholder="请输入新密码" 
          :type="showNewPassword ? 'text' : 'password'" 
          :border="true"
          class="fixed-input"
        >
        </uni-easyinput>
      </uni-forms-item>

      <!-- 确认新密码 -->
      <uni-forms-item name="confirmPassword" required>
        <uni-easyinput 
          prefixIcon="locked" 
          v-model="user.confirmPassword" 
          placeholder="请再次输入新密码" 
          :type="showConfirmPassword ? 'text' : 'password'" 
          :border="true"
          class="fixed-input"
        >
        </uni-easyinput>
      </uni-forms-item>

      <!-- 提交按钮 -->
      <uni-forms-item>
        <button form-type="submit" class="submit-button" @click="submitForm">确认修改</button>
      </uni-forms-item>
    </uni-forms>

    <!-- 错误消息显示 -->
    <view v-if="errorMessage" class="error-message">{{ errorMessage }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      errorMessage: '',
      showOldPassword: false,
      showNewPassword: false,
      showConfirmPassword: false
    }
  },
  onLoad() {
    // 加载用户信息
    this.user = { ...uni.getStorageSync('xm-user') };
  },
  methods: {
    toggleShow(type) {
      if (type === 'old') {
        this.showOldPassword = !this.showOldPassword;
      } else if (type === 'new') {
        this.showNewPassword = !this.showNewPassword;
      } else if (type === 'confirm') {
        this.showConfirmPassword = !this.showConfirmPassword;
      }
    },
    validateForm() {
      if (!this.user.oldPassword) {
        this.errorMessage = '请输入原始密码';
        return false;
      }
      if (!this.user.newPassword) {
        this.errorMessage = '请输入新密码';
        return false;
      }
      if (this.user.newPassword !== this.user.confirmPassword) {
        this.errorMessage = '新密码和确认新密码不一致';
        return false;
      }
      return true;
    },
    submitForm() {
      if (!this.validateForm()) return;
      this.user.password = this.user.oldPassword;

      this.$request.put('/updatePassword', this.user).then(res => {
        if (res.code === '200') {
          uni.removeStorageSync('xm-user');   // 清除缓存的用户信息
          uni.showToast({
            icon: "success",
            title: '修改密码成功'
          });
          setTimeout(() => {
            uni.reLaunch({ url: '/pages/login/login' }); // 重新启动应用并跳转到登录页
          }, 1500);
        } else {
          uni.showToast({
            icon: "none",
            title: res.msg || '修改密码失败，请稍后再试'
          });
        }
      }).catch(err => {
        console.error(err);
        uni.showToast({
          icon: "none",
          title: '网络错误，请检查您的网络连接'
        });
      });
    }
  }
}
</script>

<style scoped>
.container {
  padding: 40rpx;
  justify-content: center;
  align-items: center;
  height: 60vh;
  background-color: #f0f2f5; /* 背景颜色 */
}

.uni-forms {
  width: 100%;
  max-width: 600rpx;
}

.fixed-input {
  width: 100%;
  border-radius: 10rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

.eye-icon {
  width: 40rpx;
  height: 40rpx;
  cursor: pointer;
}

.submit-button {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #ffd100;
  color: #333;
  border: none;
  border-radius: 10rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 20rpx;
  transition: all .3s ease-in-out;
}

.submit-button:hover {
  background-color: #e0b900;
}

.error-message {
  color: red;
  text-align: center;
  margin-top: 20rpx;
  font-size: 24rpx;
}
</style>